<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
        />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>harp.gl - map bundle example</title>
        <style>
            body {
                background: #fff;
                padding: 0;
                margin: 0;
                font-weight: bold;
                overflow: hidden;
            }

            #mapCanvas {
                position: absolute;
                border: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                overflow: hidden;
                z-index: -1;
            }

            #copyrightNotice {
                position: absolute;
                right: 0;
                bottom: 0;
                background-color: #f0fef1;
                z-index: 100;
                padding: 2px 5px;
                font-family: sans-serif;
                font-size: 0.8em;
                font-weight: normal;
            }
        </style>
    </head>
    <body>
        <canvas id="mapCanvas"></canvas>
        <div id="app"></div>
        <div id="copyrightNotice"></div>

        <!--
            These paths are to be used by clients, when using map bundle from CDN.
        -->
        <!--
            <script src="https://unpkg.com/three/build/three.min.js"></script>
            <script src="https://unpkg.com/@here/harp.gl/dist/harp.js"></script>
        -->
        <!--
            These paths are used here to be compatible with harp.gl CI.
        -->
        <script src="credentials.js"></script>
        <script src="three.min.js"></script>
        <script src="harp.js"></script>

        <script>
            const canvas = document.getElementById("mapCanvas");

            // Look at New York.
            const NY = new harp.GeoCoordinates(40.707, -74.01);
            const map = new harp.MapView({
                canvas,
                // This, is relative URL only to make example work in CI environment.
                // Clients, may use CDN url like:
                //   https://unpkg.com/@here/harp-map-theme/resources/berlin_tilezen_base.json
                theme: "resources/berlin_tilezen_base.json",
                target: NY,
                tilt: 50,
                heading: -20,
                zoomLevel: 16.1
            });

            harp.CopyrightElementHandler.install("copyrightNotice", map);

            const mapControls = new harp.MapControls(map);
            mapControls.maxTiltAngle = 50;

            const ui = new harp.MapControlsUI(mapControls, { zoomLevel: "input" });
            canvas.parentElement.appendChild(ui.domElement);

            map.resize(window.innerWidth, window.innerHeight);

            window.addEventListener("resize", () => {
                map.resize(window.innerWidth, window.innerHeight);
            });

            const hereCopyrightInfo = {
                id: "here.com",
                year: new Date().getFullYear(),
                label: "HERE",
                link: "https://legal.here.com/terms"
            };
            const copyrights = [hereCopyrightInfo];

            const omvDataSource = new harp.OmvDataSource({
                baseUrl: "https://vector.hereapi.com/v2/vectortiles/base/mc",
                apiFormat: harp.APIFormat.XYZOMV,
                styleSetName: "tilezen",
                authenticationCode: apikey,
                authenticationMethod: {
                    method: harp.AuthenticationMethod.QueryString,
                    name: "apikey"
                },
                copyrightInfo: copyrights
            });

            map.addDataSource(omvDataSource);
        </script>
    </body>
</html>
